<!-- 使用element的导航菜单 -->
<template>
  <div class="navbar">
    <el-menu :router="true" :collapse="false" :default-active="active" class="el-menu-vertical-demo"
      background-color="#ebebeb" text-color="#000" active-text-color="#000" :collapse-transition="false" unique-opened>
      <sidebar-item v-for="route in this.navList" :key="route.id" :item="route" :base-path="route.url" />
    </el-menu>
  </div>
</template>

<script>
import call from "./siblingCall";
import SidebarItem from "./SidebarItem";
export default {
  components: { SidebarItem },
  name: "NavMenu",
  props: {},
  data() {
    return {
      navList: [],
      active: "/initializationHome",
      dateKey: new Date(),
      routersList: [], //获取所有url，
      allNavList: [], //不过滤button按钮的所有url
    };
  },
  watch: {
    '$route': function (to, from) {
      // 当路由变化时，这个函数会被调用  
      console.log('路由变化了！', to.path, from);

      this.getBtnlimits(this.allNavList, to.path) //获取按钮权限

      this.routersList.forEach(el => {
        if (to.path == el) {
          this.active = el
        }
      });
    }
  },
  mounted() {
    this.getAllMenuList();
    call.$on("getAllMenuList", () => {
      this.getAllMenuList();
    });
    this.active = this.$route.path;

    this.$eventBus.$on('Refresh', () => { //接受修改管理员权限事件
      console.log('变了没');
      this.getAllMenuList()
    })
  },
  methods: {
    getAllMenuList() {
      function removeButtonElements(arr) { //过滤 type为button的对象
        return arr.map(item => {
          if (Array.isArray(item.children)) {
            item.children = removeButtonElements(item.children);
            item.children = item.children.filter(child => child.type !== 'button');
          }
          return item;
        });
      }

      this.$http.get("/auth/menu/getRoleMenuListByAccount").then(res => {
        if (res.data.code != 200) {
          console.log(res.data.message);
        }

        this.allNavList = res.data.data // 不进行过虑button的全部url
        let arr = JSON.parse(JSON.stringify(res.data.data))
        this.navList = removeButtonElements(arr);//过滤 type为button的对象

        this.routersList = this.collectAllUrls(this.navList) //获取当前用户的所有左侧列表有的url数组

        // 判断是否有大屏查看权限，是否显示大屏图标
        let showlargeScreenIcon = false
        this.routersList.forEach(el => {
          if (el == '/largeScreen') {
            showlargeScreenIcon = true
          }
        })
        this.$eventBus.$emit('showlargeScreenIcon', showlargeScreenIcon)
        // 判断是否有大屏查看权限，是否显示大屏图标  结束============


        this.getBtnlimits(this.allNavList, this.$route.path)//获取按钮权限
      });
    },
    getBtnlimits(List, url) {
      let a = this.findHappyObjects(List, url) //获取当前跳转的路由的值
      console.log(a, '当前跳转的路由的值');
      let obj = {}
      if (!a) return
      if (!a.children) {
        sessionStorage.setItem('limits', JSON.stringify({}))
        return
      }
      let arrs = []
      if (a.children.length > 0) {
        a.children.forEach(el => {
          arrs.push(el.url) //按钮的url就是它的名字
        })
      }
      arrs.forEach(el => {
        obj[el] = true
      })
      // for (let i in obj) {
      //   arrs.forEach(el => {
      //     if (i == el) {
      //       obj[i] = true
      //     }
      //   })
      // }
      sessionStorage.setItem('limits', JSON.stringify(obj))
    },

    findHappyObjects(arr, url) {   //嵌套数组查元素
      for (let i = 0; i < arr.length; i++) {
        const obj = arr[i];
        if (obj.url === url) {
          return obj
        }
        if (obj.children && obj.children.length > 0) {
          let a = this.findHappyObjects(obj.children, url);
          if (a) {
            return a
          }
        }
      }

    },
    collectAllUrls(arr) {
      let urls = [];

      // 遍历数组中的每个元素  
      arr.forEach(item => {
        // 如果元素是对象  
        if (typeof item === 'object' && item !== null) {
          // 检查对象是否有url属性  
          if ('url' in item) {
            if (item.url) {
              urls.push(item.url); // 如果有，添加到urls数组中  
            }

          }
          // 检查对象是否有children属性  
          if ('children' in item && Array.isArray(item.children)) {
            // 如果有，递归调用collectAllUrls函数  
            urls = urls.concat(this.collectAllUrls(item.children));
          }
        }
      });

      return urls;
    },
  }
};
</script>

<style lang="less" scoped>
/* 去掉右边框 */
.el-menu {
  border-right: none;
}

.navbar {
  /deep/ .el-menu {

    .is-active {
      background-color: #b2b2b2 !important;
    }

    .is-opened {
      .el-submenu__title {
        // background-color: #c4c4c4 !important;
      }

      .el-menu--inline {
        .is-active {
          background-color: #b2b2b2 !important;
        }
      }
    }



  }
}
</style>
